<template>
    <div class='hotelData'>
        <!-- 查询条件 -->
        <el-form ref="form" :model="form" label-width="80px" size="mini">
            <div style="display:flex">
                <el-form-item label="城市名称">
                    <el-select v-model="form.cityid" clearable filterable placeholder="请选择城市名称">
                        <el-option v-for="(item,index) in cityList" :key="index" :label="item.popularCityName"
                            :value="item.popularCityId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="酒店名称">
                    <el-input style="width:400px;" v-model="form.hotelName"></el-input>
                </el-form-item>
                <el-form-item label="酒店星级">
                    <el-select v-model="form.stars" clearable filterable placeholder="请选择酒店星级">
                        <el-option v-for="(item,index) in conditionStarRatingList" :key="index" :label="item.starsName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div style="display:flex">
                <el-form-item label="推荐级别">
                    <el-select v-model="form.level" placeholder="请选择推荐级别">
                        <el-option v-for="(item,index) in recommendLevelList" :key="index" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="所属渠道">
                    <el-select v-model="form.hotelEnum" placeholder="请选择活动区域">
                        <el-option label="艺龙" value="Elong"></el-option>
                        <el-option label="自营" value="Manage"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="hotelAdd">添加酒店</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="hotelQuery">查询</el-button>
                </el-form-item>
            </div>
        </el-form>
        <!-- 表格 -->
        <el-table :data="detalist" border size="mini" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }">
            <el-table-column prop="hotelName" label="酒店名称">
            </el-table-column>
            <el-table-column prop="starName" label="酒店星级" width="100">
            </el-table-column>
            <el-table-column prop="hotelStart" label="酒店状态" width="100">
            </el-table-column>
            <el-table-column prop="hotelLevel" label="推荐星级" width="100">
            </el-table-column>
            <el-table-column prop="name" label="操作" fixed="right" width="120">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="hotelModify(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal">
        </el-pagination>
        <!-- 修改弹窗 -->
        <el-dialog title="选择修改的房型" :visible.sync="dialogVisible" center width="50%" :close-on-click-modal="false">
            <!-- <el-select v-model="region" placeholder="修改内容" @change="regionchange">
                <el-option label="酒店" value="酒店"></el-option>
                <el-option label="酒店详情" value="酒店详情"></el-option>
                <el-option label="酒店房型" value="酒店房型"></el-option>
                <el-option label="酒店房型价格" value="酒店房型价格"></el-option>
            </el-select> -->
            <div>
                <el-table :data="hotelmoneylist" border size="mini"  :header-cell-style="{
                    color: '#fff',
                    background: '#6090EC',
                    fontSize: '11px',
                    fontWeight: 'normal',
                }">
            <el-table-column prop="roomName" label="房型名称">
            </el-table-column>
            <el-table-column prop="beginDate" label="价格开始时间" width="100">
            </el-table-column>
            <el-table-column prop="endDate" label="价格结束时间" width="100">
            </el-table-column>
            <el-table-column prop="commission" label="佣金" width="100"></el-table-column>
            <el-table-column prop="basePrice" label="成本价" width="100"></el-table-column>
            <el-table-column prop="sellPrice" label="销售价	" width="100"></el-table-column>
            <el-table-column prop="vipPrice" label="会员价" width="100"></el-table-column>
            <el-table-column prop="commission" label="佣金" width="100">
            </el-table-column>
            <el-table-column prop="name" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        </div>
            <div style="margin:20px 0 0 30%" >   
                <el-button type="primary" size="mini" @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" size="mini" @click="determineButton">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { type } from '../../common/format'
    export default {
        name: 'hotelData',
        data() {
            //这里存放数据
            return {
                id: "",
                // 酒店id
                hoteluid: "",
                region: "",
                dialogVisible: false,
                // 城市列表
                cityList: [],
                // 星级
                conditionStarRatingList: [],
                // 表格数据
                detalist: [],
                //分页
                pageSize: 10,
                currentPage: 1,
                pageTotal: 0,
                // 查询表单
                form: {
                    cityid: null,
                    hotelName: "",
                    stars: "",
                    level: null,
                    hotelEnum: "Manage",
                },
                // 修改酒店类型
                hoteltype:"price",
                // 推荐级别
                recommendLevelList: [{
                        value: 1,
                        label: "1"
                    },
                    {
                        value: 2,
                        label: "2"
                    },
                    {
                        value: 3,
                        label: "3"
                    },
                    {
                        value: 4,
                        label: "4"
                    },
                    {
                        value: 5,
                        label: "5"
                    },




                ],
                    // 查询待修改数据
                    hotelInfoDetaildata:{},
                // 酒店价格列表
                hotelmoneylist:[],
                // 放行价格表格显示
            }
            
        },
        components: {},
        methods: {
            // 修改下拉框发生变化触发
            // regionchange() {
            //     if (this.region == '酒店'){
            //         this.hoteltype = 'hotel'
            //         this.hotelmoneyshow = 0
            //     }else if(this.region == '酒店详情'){
            //         this.hoteltype = 'hotelInfo'
            //         this.hotelmoneyshow = 0
                    
            //     }else if(this.region == '酒店房型'){
            //         this.hoteltype = 'hotelRoom'
            //         this.hotelmoneyshow = 0
                    
            //     }else if(this.region == '酒店房型价格'){
            //         this.hotelmoneyshow = 1

            //         this.hoteltype = 'price'
            //         // this.$axios.getroomPrice({
            //         //     id: this.hoteluid
            //         // }).then((res) => {
            //         //     if (res.code == 200) {
            //         //         console.log(res)
            //         //         this.id = res.data.id
            //         //         this.hotelmoneylist = res.data

            //         //     }
            //         // })

            //     }
            //     this.$axios.gethotelInfoDetails({
            //             id: this.hoteluid,
            //             type:this.hoteltype
            //         }).then((res) => {
            //             if (res.code == 200) {
            //                 console.log(res)
            //                 this.id = res.data.id
            //                 this.hotelInfoDetaildata = res.data
            //                 this.getselHotelRoom(res.data.id)
            //             }
            //         })
                     
                   
                 
            // },
            getselHotelRoom(id){
               this.$axios.getselHotelRoom({
                        id: id,
                    }).then((res) => {
                        if (res.code == 200) {
                            console.log(res)
                        this.hotelmoneylist = res.data
                        this.getroomPrice(res.data[0].roomId)
                        }
                    })
            },
            getroomPrice(roomId){
              this.$axios.getroomPrice({
                        id: roomId
                    }).then((res) => {
                        if (res.code == 200) {
                            console.log(res)
                             this.postHotelRoomhotelDetails(res.data[0].roomPriceId)

                        }
                    })
                },
            postHotelRoomhotelDetails(id){
                this.$axios.postHotelRoomhotelDetails({
                        id:id,
                        type:this.hoteltype
                    }).then((res) => {
                        if (res.code == 200) {
                            console.log(res)
                            
                        }
                    })
            },
            // 修改确定按钮
            determineButton() {
                this.$router.push({
                    name: "hotelEdit",
                    params:{
                        hotelInfoDetaildata:this.hotelInfoDetaildata,
                        hoteltype:this.hoteltype
                    }
                })
            },
            // 修改按钮
            hotelModify(row) {
                console.log(row)
                this.hoteluid = row.id
                this.region = ''
                this.dialogVisible = true,
                 this.$axios.gethotelInfoDetails({
                        id: this.hoteluid,
                        type:this.hoteltype
                    }).then((res) => {
                        if (res.code == 200) {
                            console.log(res)
                            this.id = res.data.id
                            this.hotelInfoDetaildata = res.data
                            this.getselHotelRoom(res.data.id)
                        }
                    })
                     
                
            },
            // 查询按钮
            hotelQuery() {
                //  form: {
                //     provinceName: "",
                //     hotelName: "",
                //     stars: "",
                //     level: null,
                //     hotelEnum:"Manage",
                // },
                if (this.form.cityid != null || this.form.hotelName != '' || this.form.stars != '' || this.form.level !=
                    null) {
                    this.postselectHotelsList()
                } else {
                    this.$message({
                        message: '至少用一种查询条件进行查询',
                        type: 'warning'
                    });
                }
            },
            // 添加酒店按钮
            hotelAdd() {
                this.$router.push({
                    name: "hotelAdd",
                })
            },
            // 表格编辑按钮
            hotelEditor(row) {
                console.log(row)
            },
            // 列表
            postselectHotelsList() {
                this.showLoading()
                this.$axios.postselectHotelsList({
                    cityid: this.form.cityid,
                    hotelName: this.form.hotelName,
                    stars: this.form.stars,
                    level: this.form.level,
                    hotelEnum: this.form.hotelEnum,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize
                }).then((res) => {
                    this.closeLoading()
                    console.log(res)
                    if (res.code == 200) {
                        this.pageTotal = res.data.totalNumber
                        this.detalist = res.data.hotelsVoList
                    }
                })
            },
            // 推荐级别接口
            // getrecommendLevel() {
            //     this.$axios.getrecommendLevel({}).then((res) => {
            //         console.log()
            //         if (res.code == 200) {
            //             this.recommendLevelList = res.datta
            //             console.log(this.recommendLevelList)
            //         }
            //     })
            // },
            // 星级接口
            getconditionStarRating() {
                this.$axios.getconditionStarRating().then((res) => {
                    if (res.code == 200) {
                        this.conditionStarRatingList = res.data
                    }
                })
            },
            // 城市接口
            postcityList() {
                this.$axios.postgitcityList().then((res) => {
                    if (res.code == 200) {
                        this.cityList = res.data
                        console.log(this.cityList)
                    }
                })
            },
            //分页
            handleSizeChange(value) {
                console.log("1", value);
                this.pageSize = value;
                this.postselectHotelsList();
            },
            handleCurrentChange(value) {
                console.log("2", value);
                this.currentPage = value;
                this.postselectHotelsList();
                console.log(value);
            },
            //跳出
            closeLoading() {
                this.tableLoading.close();
            },
            //进入
            showLoading() {
                this.tableLoading = this.$loading({
                    text: "拼命加载数据中", //显示在加载图标下方的加载文案
                    spinner: "el-icon-loading", //自定义加载图标类名
                    background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
                    target: document.querySelector("#table"), //loadin覆盖的dom元素节点
                });
            },
        },
        created() {

        },
        mounted() {
            // 星级
            this.getconditionStarRating()
            // 级别
            // this.getrecommendLevel()
            this.postcityList()
            // 列表
            // this.postselectHotelsList()
        }
    }
</script>
<style scoped>
    .hotelData {
        margin: 20px;
    }
</style>